<template>
  <div id="divml1">
    <el-container>
      <el-container>
        <el-aside width="240px">
          <div id="divml1-1">
            <img
               :src="res.image"
              alt=""/>
          </div>
          <p id="divmlp">{{res.phone}}</p>
          <el-tag type="info" id="divmlel">{{res.name}}</el-tag>
        </el-aside>
        <el-main>
          <table cellpadding="0" cellspacing="0" id="divmltable1">
            <tr>
              <td>姓名</td>
              <td>{{res.name}}</td>
              <td>擅长</td>
              <td>{{res.specialty}}</td>
            </tr>
            <tr>
              <td>电话</td>
              <td>{{res.phone}}</td>
              <td>所属场馆</td>
              <td>{{res.space_name}}</td>
            </tr>
            <tr>
              <td>性别</td>
              <td>{{res.sex==1?'男':'女'}}</td>
              <td>从业时间</td>
              <td>{{res.working_time}}</td>
            </tr>
            <tr>
              <td>角色</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </el-main>
      </el-container>
    </el-container>

    <!-- 上-人员信息表+表格 -->
    <div id="tablediv">
      <p id="divmlp1"><span>统计信息</span></p>
    </div>
    <table cellpadding="0" cellspacing="0" id="divmltable2">
      <tr>
        <th>消费总金额</th>
        <th>本月消费</th>
        <th>本月上课数</th>
        <th>优惠券(张)</th>
        <th>有效会员卡</th>
      </tr>
      <tr>
        <td>￥2000.00</td>
        <td>￥2000.00</td>
        <td>2000</td>
        <td>10</td>
        <td>1</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data:function () {
    return {
      user:"",
      res:[],
      str:"",
      id:"",
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
    };
  },

  methods:{
     getdata(){
       this.id=this.$route.params.id;
      this.$axios({
        url:'/gym/coach/find',
        params:{
          id:this.id
        }
      }).then((res)=>{
            this.res=res.data.data
      })
    },
  },

  mounted(){
    this.id = sessionStorage.getItem('idb');
    this.getdata()
  }
};
</script>

<style scoped lang="less">
#divml1 {
  margin: 20px;
};

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 30px;
  padding: 30px;
  #divmlp {
    line-height: 30px;
  }
};

#divmlel {
  margin-top: 20px;
};

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
};

body > .el-container {
  margin-bottom: 40px;
};

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
};

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
};

#divml1-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 40px;
  margin-top: 10px;
};

#divmltable1 td {
  border: 1px solid black;
  padding: 10px 60px;
  border: 1px solid #d6d6d6;
  line-height: 20px;
  border-collapse: collapse;
};

#divmltable1{margin: 0 auto;};

#divmltable2 {
  width: 100%;
  line-height: 20px;
  border: 1px solid #d6d6d6;
  td {
    border: 1px solid #d6d6d6;
    padding: 20px 20px;
  };
  th {
    border: 1px solid #d6d6d6;
    padding: 20px 20px;
  }
};

#tablediv {
  height: 20%;
  background: #c7c7c7;
  margin-top: 20px;
  border-radius: 5px 5px 0 0;
};

#divmlp1 {
  font-size: 16px;
  height: 30px;
  span {
    float: left;
    line-height: 30px;
    margin-left: 10px;
  }
};
a {
  text-decoration: none;
};

#mllel {
  margin-bottom: 30px;
};
</style>